
exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _createNamespace = (0, _utils.createNamespace)('progress');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  props: {
    color: String,
    inactive: Boolean,
    pivotText: String,
    textColor: String,
    pivotColor: String,
    trackColor: String,
    strokeWidth: [Number, String],
    percentage: {
      type: [Number, String],
      required: true,
      validator: function validator(value) {
        return value >= 0 && value <= 100;
      },
    },
    showPivot: {
      type: Boolean,
      default: true,
    },
  },
  data: function data() {
    return {
      pivotWidth: 0,
      progressWidth: 0,
    };
  },
  mounted: function mounted() {
    this.setWidth();
  },
  watch: {
    showPivot: 'setWidth',
    pivotText: 'setWidth',
  },
  methods: {
    setWidth: function setWidth() {
      const _this = this;

      this.$nextTick(() => {
        _this.progressWidth = _this.$el.offsetWidth;
        _this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
      });
    },
  },
  render: function render() {
    const h = arguments[0];
    const { pivotText } = this;
    const { percentage } = this;
    const text = (0, _utils.isDef)(pivotText) ? pivotText : `${percentage}%`;
    const showPivot = this.showPivot && text;
    const background = this.inactive ? '#cacaca' : this.color;
    const pivotStyle = {
      color: this.textColor,
      left: `${(this.progressWidth - this.pivotWidth) * percentage / 100}px`,
      background: this.pivotColor || background,
    };
    const portionStyle = {
      background,
      width: `${this.progressWidth * percentage / 100}px`,
    };
    const wrapperStyle = {
      background: this.trackColor,
      height: (0, _utils.addUnit)(this.strokeWidth),
    };
    return h('div', {
      class: bem(),
      style: wrapperStyle,
    }, [h('span', {
      class: bem('portion'),
      style: portionStyle,
    }, [showPivot && h('span', {
      ref: 'pivot',
      style: pivotStyle,
      class: bem('pivot'),
    }, [text])])]);
  },
});

exports.default = _default;
